<template>
  <div id="question">
    <el-container>
      <el-main>
        <el-row>
          <div class="my_question">
            {{pages[num].question}}
          </div>
        </el-row>
        <div v-for="answer in pages[num].answer" :key="answer.index"
             class="my_answer">
          <el-button @click="update(answer)" type="text" style="color:#004e82;">
            {{answer.content}}
          </el-button>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {submit} from "@/api/api";

export default {
  name: "question",

  data() {
    return {
      pages: [
        {
          question : "1.下面你最喜欢的颜色是：",
          answer: [
            {
              index : 1,
              content : "红色",
              points : [0, 0, 0, 0, 2, 2, 2, 1]
            },
            {
              index : 2,
              content : "蓝色",
              points : [0, 0, 1, 2, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "紫色",
              points : [1, 0, 0, 2, 0, 0, 0, 0]
            },
            {
              index : 4,
              content : "橙色",
              points : [0, 1, 0, 0, 0, 0, 0, 0]
            }
          ]
        },
        {
          question : "2.下列你倾向于何种运动？",
          answer: [
            {
              index : 1,
              content : "登山",
              points : [0, 0, 0, 0, 0, 0, 0, 1]
            },
            {
              index : 2,
              content : "骑自行车",
              points : [1, 0, 1, 0, 2, 0, 0, 0]
            },
            {
              index : 3,
              content : "跳舞",
              points : [0, 0, 0, 1, 0, 0, 0, 0]
            },
            {
              index : 4,
              content : "滑板",
              points : [0, 1, 0, 0, 0, 0, 0, 0]
            }
          ]
        },
        {
          question : "3.如果你去海边度假，你最希望做什么？",
          answer: [
            {
              index : 1,
              content : "冲浪",
              points : [0, 2, 0, 0, 1, 1, 1, 0]
            },
            {
              index : 2,
              content : "逛纪念品商店",
              points : [0, 0, 0, 1, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "堆沙堡",
              points : [0, 0, 1, 0, 0, 0, 0, 0]
            },
            {
              index : 4,
              content : "潜水",
              points : [1, 0, 0, 0, 0, 0, 0, 2]
            }
          ]
        },
        {
          question : "4.你觉得自己的性格更偏向：",
          answer: [
            {
              index : 1,
              content : "热情",
              points : [0, 0, 0, 0, 2, 1, 1, 2]
            },
            {
              index : 2,
              content : "安静",
              points : [2, 0, 0, 1, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "浪漫",
              points : [0, 0, 1, 0, 0, 0, 0, 0]
            },
            {
              index : 4,
              content : "勇敢",
              points : [0, 1, 0, 0, 0, 1, 1, 0]
            }
          ]
        },
        {
          question : "5.通常你完成任务的时间分配方式是：",
          answer: [
            {
              index : 1,
              content : "ddl是第一生产力",
              points : [0, 0, 1, 0, 0, 0, 0, 0]
            },
            {
              index : 2,
              content : "看心情",
              points : [0, 1, 0, 0, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "早做完早休息",
              points : [0, 0, 0, 0, 2, 2, 2, 1]
            },
            {
              index : 4,
              content : "均匀分配时间",
              points : [1, 0, 0, 1, 0, 0, 0, 0]
            }
          ]
        },
        {
          question : "6.朋友对我的评价最有可能的是：",
          answer: [
            {
              index : 1,
              content : "能言善辩，以理服人",
              points : [2, 0, 0, 0, 0, 0, 0, 1]
            },
            {
              index : 2,
              content : "天马行空，青春四溢",
              points : [0, 0, 2, 0, 0, 1, 1, 0]
            },
            {
              index : 3,
              content : "奔放自由，喜欢挑战",
              points : [0, 1, 0, 0, 2, 1, 1, 0]
            },
            {
              index : 4,
              content : "耐心善听，待人温和",
              points : [0, 0, 0, 1, 0, 0, 0, 0]
            }
          ]
        },
        {
          question : "7.当你还是个孩子的时候，你：",
          answer: [
            {
              index : 1,
              content : "不太会积极尝试新事物，通常比较喜欢旧有的和熟悉的",
              points : [0, 0, 0, 2, 1, 1, 1, 0]
            },
            {
              index : 2,
              content : "害羞见生人，会有意识地回避",
              points : [2, 1, 0, 0, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "大胆好奇，喜欢想象创造",
              points : [0, 0, 2, 0, 0, 0, 0, 0]
            },
            {
              index : 4,
              content : "调皮可爱，在大部分的情况下是乐观而又热心的",
              points : [0, 0, 0, 0, 0, 0, 0, 1]
            }
          ]
        },
        {
          question : "8.下列完成任务的模式，你更喜欢：",
          answer: [
            {
              index : 1,
              content : "单打独斗",
              points : [0, 1, 1, 0, 1, 2, 0, 2]
            },
            {
              index : 2,
              content : "合作共赢",
              points : [2, 0, 0, 2, 0, 0, 2, 0]
            },
            {
              index : 3,
              content : "群雄逐鹿",
              points : [0, 0, 0, 0, 1, 0, 0, 1]
            },
            {
              index : 4,
              content : "组队PK",
              points : [1, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        },
        {
          question : "9.联欢中以下节目，你更喜欢观看或参与：",
          answer: [
            {
              index : 1,
              content : "歌舞",
              points : [0, 0, 0, 2, 0, 0, 0, 0]
            },
            {
              index : 2,
              content : "魔术",
              points : [0, 1, 1, 0, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "抢凳子",
              points : [0, 0, 0, 0, 2, 0, 0, 1]
            },
            {
              index : 4,
              content : "猜谜语",
              points : [1, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        },
        {
          question : "10.在驾驶车辆时，你更喜欢以下那种做法？",
          answer: [
            {
              index : 1,
              content : "我根本不想开车",
              points : [1, 0, 0, 0, 0, 0, 0, 0]
            },
            {
              index : 2,
              content : "我喜欢炫车技，例如超车",
              points : [0, 2, 1, 0, 2, 0, 0, 1]
            },
            {
              index : 3,
              content : "有强迫症，例如完美停车",
              points : [0, 0, 1, 2, 0, 0, 0, 1]
            },
            {
              index : 4,
              content : "不受其他车辆影响，自己开自己的",
              points : [0, 0, 0, 0, 0, 1, 1, 0]
            }
          ]
        },
        {
          question : "11、以下游戏你更喜欢哪个？",
          answer: [
            {
              index : 1,
              content : "MOBA类游戏，如英雄联盟",
              points : [0, 1, 1, 0, 0, 0, 0, 1]
            },
            {
              index : 2,
              content : "养成类游戏，如奇迹暖暖",
              points : [2, 0, 0, 1, 0, 0, 0, 0]
            },
            {
              index : 3,
              content : "竞速类游戏，如极品飞车",
              points : [0, 0, 0, 0, 2, 2, 2, 0]
            },
            {
              index : 4,
              content : "设计类游戏，如我的世界",
              points : [1, 0, 0, 0, 0, 0, 0, 0]
            }
          ]
        },
      ],
      num : 0,
      my_points : [0, 0, 0, 0, 0, 0, 0, 0],
      my_choice : []
    }
  },

  methods: {
    update(answer) {
      this.my_choice.push(String.fromCharCode(64 + answer.index))
      for (let i = 0; i < this.my_points.length; i++) {
        this.my_points[i] += answer.points[i]
      }
      if (this.num < this.pages.length - 1) {
        this.num++;
      }
      else {
        let kind = this.get_kind();
        this.send_message(kind);
        this.$router.replace({
            // path: `/finish/${kind}`
          path: `/another_finish/${kind}`
        })
      }
    },
    get_kind() {
      console.log(this.my_points)
      console.log(this.my_choice)
      let max = 0;
      let max_index = 0;
      for (let i = 0; i < this.my_points.length; i++) {
        if (this.my_points[i] > max) {
          max = this.my_points[i];
          max_index = i;
        }
      }
      return max_index;
    },
    send_message(kind) {
      submit({
        answer : JSON.stringify(this.my_choice),
        // id : this.get_id(),
        type : kind
      }).then(res => {
        if (res.data.success) {
          this.$message.success("结果上传成功")
        }
        else {
          this.$message.warning("结果上传失败")
        }
      }).catch(err => {
        console.log(err)
      })
    },
    get_id() {
      const s = [];
      const hexDigits = "0123456789abcdef";
      for (let i = 0; i < 36; i++) {
        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
      }
      s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
      s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
      s[8] = s[13] = s[18] = s[23] = "-";
      console.log(s.join(""))
      return s.join("");
    }
  }
}
</script>

<style scoped>
#question {
  height: 60%;
  width: 100%;
}
.el-container {
  height: 100%;
  width: 100%;
  display: table;
}
.el-main {
  display: table-cell;
  vertical-align: bottom;
}

.my_answer {
  height: 17%;
  background-color: rgba(186, 215, 248, 0.8);
  border: 1px solid rgba(0,0,0,0.1);
}
.el-button {
  height: 100%;
  color: black;
  font-size: larger;
  width: 100%;
  word-wrap: break-word !important;
  word-break: break-all !important;
  white-space: normal !important;
  font-weight: bolder;
}
.el-row {
  height: 20%;
  width: 100%;
  display: table;
}
.my_question {
  display: table-cell;
  vertical-align: middle;
  background-color: rgba(115, 145, 182, 0.8);
  color: #f4f5f6;
  font-weight: bold;
  font-size: larger;
  border: 1px solid rgba(0,0,0,0.1);
}
</style>
